<template>
  <div id="box" class="time_plan">
    <header id="head" class="fff">
      <div id="bar"></div>
      <ul class="flex-col">
        <li class="head-l">
          <i>XX</i>
        </li>
        <li class="box1 head-c">作息安排</li>
        <li class="head-r flex-col flex-middle"></li>
      </ul>
    </header>
    <main>
      <div class="sub_tit c82 font-12 padding-l15">选择每周休息日（有黄色填充表示休息日）</div>
      <ul class="day flex-parent cfff">
        <li>
          <div class="shape-z position-r bgfff">
            <div class="position-a full box-center active">星期一</div>
          </div>
        </li>
        <li>
          <div class="shape-z position-r bgfff">
            <div class="position-a full box-center">星期二</div>
          </div>
        </li>
        <li>
          <div class="shape-z position-r bgfff">
            <div class="position-a full box-center">星期二</div>
          </div>
        </li>
        <li>
          <div class="shape-z position-r bgfff">
            <div class="position-a full box-center">星期二</div>
          </div>
        </li>
        <li>
          <div class="shape-z position-r bgfff">
            <div class="position-a full box-center">星期二</div>
          </div>
        </li>
        <li>
          <div class="shape-z position-r bgfff">
            <div class="position-a full box-center">星期二</div>
          </div>
        </li>
        <li>
          <div class="shape-z position-r bgfff">
            <div class="position-a full box-center">星期二</div>
          </div>
        </li>
      </ul>
      <div class="time cfff font-14">
        <ul class="flex-col">
          <li class="box1">
            <span>上班时间</span>
            <input type="number" value="10">
            :
            <input type="number" value="30">
          </li>
          <li class="box1">
            <span>下班时间</span>
            <input type="number" value="18">
            :
            <input type="number" value="30">
          </li>
        </ul>
      </div>
      <p class="font-14 padding-l15">预计开放时间为上班至下班前一半小时</p>
    </main>
    <footer class="box-center">
      <div class="box-center cfff font-14 ">保存</div>
    </footer>
  </div>
</template>

<script>
  export default {
    name: "time_plan"
  };
</script>

<style scoped lang="scss">
  @import '../../css/rem.scss';

  .time_plan {
    .shape-z{
      width: 100%;
      padding-bottom: 100%;
    }
    .full{
      top: 0;
      left: 0;
    }
    main {
      .sub_tit {
        height: p2r(35px);
        line-height: p2r(35px);
        background: #eef7fe;
      }
      .day {
        padding: p2r(20px) p2r(10px);
        li {
          padding: p2r(4px);
          box-sizing: border-box;
          flex:0 0 25%;
          div {
            border-radius: p2r(5px);
            div{
              font-size: p2r(13px);
              background: #85b5dd;
              &.active {
                background: #fcc24e;
              }
            }
          }
        }
      }
      .time{
        padding: p2r(30px) p2r(15px) p2r(10px);
        ul{
          background: #007ffc;
          box-shadow: 0 0 p2r(20px) #007efd;
          border-radius: p2r(5px);
          height: p2r(70px);
          li{
            display: flex;
            align-items: center;
            justify-content: center;
            align-content: baseline;
            input{
              width: p2r(22px);
              height: p2r(22px);
              color: #198af7;
              margin: 0 p2r(4px);
              text-align: center;
            }
            span{
              display: inline-block;
              padding-right: p2r(4px);
            }
            &:last-child{
              border-left: 1px solid #fff;
            }
          }
        }
      }
    }
    footer {
      padding-top: p2r(100px);
      div {
        height: p2r(40px);
        width: 80%;
        border-radius: p2r(40px);
        background: #1994fe;
      }
    }
  }
</style>
